<html>
<head>
   <script src="../../Grid/GridE.js"> </script>
</head>
<body class="Tutorial">
   <style>
      /* Tutorial shared styles */
      .Tutorial h1,.Tutorial h2,.Tutorial ul,.Tutorial .Desc,.Tutorial .Path,.Tutorial .Xml { max-height:999999px; }
      .Tutorial h1 { font:30px Arial; padding:5px 0px 5px 0px; margin:0px; text-align:center; }
      .Tutorial h2 { font:15px Arial; padding:0px; margin:0px 0px 10px 0px; text-align:center; color:#757575; }
      .Tutorial h3,.Tutorial h4 { display:inline-block; font:bold 15px Arial; padding:0px 5px 0px 5px; border-radius:2px; color:black; margin:2px; font-style:normal; color:#333; }
      .Tutorial h3 { background:#EE9; border:1px solid #DD8; }
      .Tutorial h4 { background:#BDE; border:1px solid #ACD; }
      .Tutorial a { text-decoration:underline; }      
      .Tutorial li { padding-bottom:8px; }
      .Tutorial ul { margin:6px 0px 0px 20px; font:13px Arial; }
      .Tutorial > ul { margin-left:0px; padding-left:15px; clear:both; }
      .Tutorial ul b { color:#0585B9; }
      .Tutorial .Path { font:normal 12px Arial; color:#0585B9; }
      .Tutorial .Path b { color:#D73938; }
      .Tutorial .Path u { text-decoration:none; color:black; font-weight:bold; padding:0px 2px 0px 2px; }
      .Tutorial .Xml { margin-bottom:6px; font-size:12px; color:#757575; }
      .Tutorial .Border { border:1px solid #dfdfdf; padding:10px 20px 10px 20px; margin:0px 8px 20px 0px; min-width:100%; box-sizing:border-box; }
      .Tutorial .Main { }
   </style>

   <script>
      // --- Shows confirmation for navigation to clicked link ---
      Grids.OnLinkClick = function(G){
         Grids.Alert = 1; var ret = !confirm('Do you want to navigate here?'); Grids.Alert = 0; return ret;
         }
   </script>

   <center class="Path"><script>document.write(location.href.replace(/(.*)(\/Tutorials\/)([^\/]+)\/([^\/]+)$/,"$2<b>$3</b>/$4").replace(/([^<]|^)(\/|\.)/g,"$1<u>$2</u>"));</script></center>
   <h1>3. HTML, Links, Images and Buttons</h1>
   <h2>Any HTML content, hyperlinks, images, cell action buttons</h2>
   <center class="Border" id="Border">
      <div class="Xml">Source: <a href='03-HTML.xml'>03-HTML.xml</a></div>
      <div class="Main" style='width:100%; height:313px;'>
         <bdo Debug='check' Data_Url='03-HTML.xml'></bdo>
      </div>
   </center>

   <ul>
      <li>
         Showing <h4>hyperlink</h4> in cell can be done in many ways.<br />
         <ul>
            <li>
               The simplest is <b>attribute</b> <h3>Link</h3> attaching the link for any cell type and value. 
               You can define target window for the link by <b>LinkTarget</b> attribute.
               If the cell is editable, the value (but not the link url) can be still edited by clicking in cell outside the link or pressing Enter or F2.
               The Link attribute does not support catching onclick to the link.
            </li>   
            <li>
               More complex is <h3>Link</h3> Type. Both the link url and link text (and also link target) are defined in cell value, as the first character separated list as '|href|text|target'.
               For example Col1='|http://www.treegrid.com|TreeGrid web|_blank'
               To let users to follow the link, set <b>CanEdit</b>='0'. To let users to edit the link text and url set CanEdit='1' and specify what will be edited by <b>EditFormat</b>.
               You can catch the link click by XML event <b>OnClickLink</b> or by API event <b>OnLinkClick</b>.
               The Link type supports adding prefixes to text and or to url by <b>Format</b> attribute.
            </li>
            <li>
               The link can be defined also by standard HTML <b>&lt;a></b> tag included in <b>Html</b> type cell or in <b>HtmlPrefix</b> attribute.<br />
               Or it can be simulated in API or XML event <b>OnClick</b> by JavaScript window.open method.
            </li>
         </ul>
      </li>
      <li>
         Showing <h4>image</h3> in cell can be done in many ways.<br />
         <ul>
            <li>
               The simplest is <h3>Icon</h3> type, it shows in cell only one inactive image defined by the cell value. It produces the smallest HTML code.
               The icon can be aligned by <b>Align</b> attribute to left, right or center.
            </li>
            <li>
               More complex is <h3>Img</h3> type, it shows in cell one image, supports resizing and cropping the image and also hyperlink.
               The image source, size and link is defined in cell value, as the first character separated list as '|src|width|height|left|top|link'.
               For example Col1='|Green.svg|20|20|10|6|http://www.treegrid.com'.
               If set only width and height, it will be resized to them, if set all four extents, it shows the cut off rectangle from the original image.<br />
               You can catch the link click by XML event <b>OnClickLink</b> or by API event <b>OnLinkClick</b>.
               The Img type supports adding prefixes to source, text and to url by <b>Format</b> attribute.
               The Img type can be also editable and permits editing all the source parts, what is edited is defined by <b>EditFormat</b>.
            </li>
            <li>
               <h4>Side icons</h4>. In every cell is possible to show side icons along with the cell value, defined by <b>Icon</b> a <b>Button</b> attributes.<br />
               <ul>
                  <li>
                     The <b>attribute</b> <h3>Button</h3> shows right side icon or button or custom HTML code. All buttons in one column have the same width defined by column's <b>WidthPad</b> attribute.<br />
                     The click to the Button can be caught by API event <b>OnButtonClick</b> or by XML event <b>OnClickSide</b> or <b>OnClickSideButton</b>.
                  </li>
                  <li>
                     The <b>attribute</b> <h3>Icon</h3> shows left or right side icon. So the cell can have maximally two right side icons or one left and one right. <br />
                     The icon position is defined by <b>IconAlign</b> attribute.
                     In one column every Icon can have different width set by <b>IconWidth</b> attribute. 
                     The Icon cannot show any HTML code or &lt;button>.<br />
                     The click to the Icon can be caught by API event <b>OnIconClick</b> or by XML event <b>OnClickSide</b> or <b>OnClickSideIcon</b>.
                  </li>
               </ul>
            </li>
            <li>
               The image can be defined also by standard HTML <b>&lt;img></b> tag or by tag with defined CSS <b>background-image</b>, 
               included in <b>Html</b> type cell or in <b>HtmlPrefix</b> / <b>HtmlPostfix</b> attribute.<br />
            </li>
         </ul>
      </li>
      <li>
         <h3>Panel</h3> type shows <b>more clickable icons</b> or buttons in one cell.
         Every icon or button can have defined its own width, onclick, tooltip and mouse cursor.<br />
         For TreeGrid standard row icons (Move,Select,Delete,Copy) is shown fast panel, with all icons in one image.<br />
         For custom icons is shown every icon in separate tag. The custom panel buttons are defined in list in the cell value or column <b>Buttons</b> attribute.<br />
         For example: Col1='But' Col1But='Green.svg' Col1ButWidth='20' Col1OnClickPanelBut='alert("clicked")' Col1PanelButTip='tooltip for but' Col1PanelButCursor='crosshair'.
      </li>
      <li>
         <h3>Abs</h3> type shows independent, <b>absolutely positioned HTML</b> tags inside one cell.<br />
         All the tags are defined in the cell value, in the first character separated list as |x|y|width|height|html|cls|reserved|reserved|x|y|width|height|html|cls|reserved|reserved|x|... 
      </li>
      <li>
         <h3>File</h3> type permits users to select <b>local file from disk</b> and display it in the cell and / or <b>upload</b> it to server. <b style="color:red;">It does not work in IE 9 and older!</b><br />
         The files are uploaded like standard &lt;input type="file"> values under name/key "row_id$col_name". If more files are uploaded for one cell, the next files have names "row_id$col_name$index", with index starting 1.<br />
         <b>Format</b> attribute specifies how the file will be shown in the cell, e.g. as its name or as thumbnail or as image. It can be set also dynamically by <b>OnGetFormat</b> API event.<br />
         It is possible to select more files to one cell by setting <b>Range</b>='1'.<br />
         To control which files can be selected use <b>Accept</b> attribute as media type and / or <b>OnSetFile</b> API event to restrict actually selected files.<br />
      </li>
   </ul>

   <!-- Google Analytics code run once for trial -->
   <script>
      var TGTrial = document.cookie.match(/TGTrialCells\s*=\s*(\d+)/), TGIndex = 4;
      if(!TGTrial||!(TGTrial[1]&TGIndex)) setTimeout(function(){
         var n = "RunTrialGridCells3", d = (new Date((new Date).getTime()+31536000000)).toUTCString(); document.cookie = "TGTrialCells="+((TGTrial?TGTrial[1]:0)|TGIndex)+";expires="+d;
         var u = document.cookie.match(/TGTrialUsed\s*=\s*(\d+)/); u = u ? u[1]-0+1 : 1; if(u<=11) document.cookie = "TGTrialUsed="+u+";path=/;expires="+d;
         var s = "<div style='width:0px;height:0px;overflow:hidden;'><iframe src='http"+(document.location.protocol=="https"?"s":"")+"://www.treegrid.com/Stat/GA.html?productName="
               +(u==1||u==3||u==5||u==10?"UsedTrial"+u:n)+"' onload='var T=this;setTimeout(function(){document.body.removeChild(T.parentNode.parentNode);},1000);'/></div>";
         var F = document.createElement("div"); F.innerHTML = s; document.body.appendChild(F);
         },100);
   </script>
</body>
</html>